<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>信号优先系统</title>
	<link rel="icon" href="img/title.jpg" type="image/x-icon" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/layui.css">
	<script type="text/javascript" src="js/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		h1,h3{
			font-weight: bold;
		}
		body,html{
			height: 100%;
		}
		.main{
			width: 1200px;background: #eeeeee;margin: 0 auto; padding: 10px;
		}
		#top{
			/*height: 20px;*/text-align: center; margin: 10px auto;background: #a41f24;width: 1220px;color: #fff;letter-spacing: 5px; padding: 10px 0;
		}
		#simulate{
			position: relative;
		}
		
		.leftLight,.rightLight{
			width: 60px;height: 60px;border-radius: 60px;background-color:#e45534;position: absolute;line-height: 60px;text-align: center;font-size: 25px;font-weight: bold; color: #fff;
		}
		.leftLight{
			top: 55px;left: 600px;
		}
		.rightLight{
			top: 320px;left: 900px;
		}
		#info{
			margin-top: 20px;overflow: hidden;
		}
		#info h2{
			text-align: center;margin-bottom: 20px;
		}

		#left,#right{
			width: 550px;height: 400px; float: left;padding: 12.5px;
		}
		#left{
			/*background: lightpink;*/margin-right: 25px;
		}
		#right{
			/*background: lightgreen;*/margin-left: 25px;
		}

		#left h3,#right h3{
			text-align: center; margin: 10px auto;
		}

		table{
			width: 550px;/*border: 1px solid #31c27c;*/border-collapse:collapse; margin: 10px 0;
		}
		table tr{
			height: 40px;line-height: 40px;text-align: center;
		}
		#left table td{
			border: 1px solid skyblue;
		}
		#right table td{
			border: 1px solid #31c27c;
		}
		#left table thead td{
			background: #31c27c;color: #fff;border: 1px solid skyblue;
		}
		#right table thead td{
			background: #1E9FFF;color: #fff;border: 1px solid #31c27c;
		}
	</style>
</head>
<body >
	<div id="top">
		<h1>信号优先系统</h1>
	</div>
	<div class="main">
		<div id="simulate">
			<h2>动态仿真</h2>
			<div class="img">
				<div class="leftLight"></div>
				<div class="rightLight"></div>
				<canvas id="canvas" width="1200px" height="400px"></canvas>
			</div>
		</div>
		<div id="info">
			<h2>数据信息</h2>
			<div id="left">
				<h3>左侧车辆信息</h3>
				<p>第一辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>黑AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
				<p>第二辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>京AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
				<p>第三辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>冀AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="right">
				<h3>右侧车辆信息</h3>
				<p>第一辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>黑AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
				<p>第二辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>京AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
				<p>第三辆车:</p>
				<table>
					<thead>
						<tr>
							<td>编号</td>
							<td>线路</td>
							<td>位置</td>
							<td>速度</td>
							<td>拥挤程度</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>冀AL0015</td>
							<td>304</td>
							<td>60</td>
							<td>35km/h</td>
							<td>拥挤</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
</body>
<!-- <script type="text/javascript">
	var time=prompt("请输入倒计时");
	console.log(time);
</script> -->
</html>